<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>PicNet Table Filter Demo</title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>    		    
	<script type="text/javascript" src="lib/closure-library/closure/goog/base.js"></script>				
	<script type="text/javascript" src="src/deps.js"></script>				
	<script type="text/javascript" src="src/requirements.js"></script>
	
	
    <script type="text/javascript">
        $(document).ready(function() {
            //  Randomly Create Data Rows
            for (var i = 0; i < 50; i++) {
                var tr = $("<tr>" +
					"<td>Value" + Math.floor(Math.random() * 500) + "</td>" + 
					"<td>" + Math.floor(Math.random() * 500) + " </td>" + 
					"<td>" + (Math.random() > 0.5 ? "yes" : "no") + "</td>" + 
					"<td>" + (Math.random() <= 0.333 ? "Item 1" : Math.random() > 0.5 ? "Item 2" : "Item 3") + "</td>" + 
					"<td></td>" +
					"<td>" + parseInt(10 + Math.random() * 18) + "/" + parseInt(10 + Math.random() * 2) + "/2009</td>" + 					
					"<td></td>" +
					"</tr>");
                $('#demotable1 tbody').append(tr);
            }
			
			for (var i = 0; i < 50; i++) {
                var tr = $("<tr><td>Value(2) " + Math.floor(Math.random() * 500) + "</td></tr>");
                $('#demotable2 tbody').append(tr);
            }

            // Initialise Plugin
            var options1 = {
                additionalFilterTriggers: [$('#onlyyes'), $('#onlyno'), $('#quickfind')],
                clearFiltersControls: [$('#cleanfilters')],
                matchingRow: function(state, tr, textTokens) {					
                    if (!state || !state.id) { return true; }					
					var child = tr.children('td:eq(2)');
					if (!child) return true;
					var val =  child.text();
										
					switch (state.id) {
						case 'onlyyes': return state.value !== true || val === 'yes';
						case 'onlyno': return state.value !== true || val === 'no';
						default: return true;
					}
                }
            };

            $('#demotable1').tableFilter(options1);
			
			var grid2 = $('#demotable2');
			var options2 = {                
                filteringRows: function(filterStates) {										
					grid2.addClass('filtering');
                },
				filteredRows: function(filterStates) {      															
					grid2.removeClass('filtering');					
					setRowCountOnGrid2();
                }
            };			
			function setRowCountOnGrid2() {
				var rowcount = grid2.find('tbody tr:not(:hidden)').length;
				$('#rowcount').text('(Rows ' + rowcount + ')');										
			}
			
			grid2.tableFilter(options2); // No additional filters			
			setRowCountOnGrid2();
        });
    </script>
<style>
body {

	}
* {	
	font-family:arial;
	line-height:1.5em;
	}
h2 {
	color:#00334e;
	font-size:1.2em;
	font-weight:normal;
	text-shadow:0px 1px 1px #fff;
	}
h3 {
	font-size:1em;
	}
.wrapper {
	width:640px;
	margin:0 auto;
	}
.header {
	width:640px;
	margin-bottom:20px;
	padding-bottom:10px;
	border-bottom:1px solid #ddd;
	}
.content {
	font-size:8pt;
	clear:both;
	}
.header,
.picnet_logo, 
.instructions,
.column1,
.column2 {
	display:inline;
	position:relative;
	float:left;
	}
.picnet_logo {
	width:104px;
	height:110px;
	background-image:url('http://www.picnet.com.au/images/picnet_logo_full.png');
	background-repeat:no-repeat;
	margin-top:20px;
	}
.instructions {
	width:460px;
	margin-left:40px;
	}
.instructions p {
	font-size:0.8em
	}
table,
td,
th {
	border: solid 1px silver;
	color:#666;
	padding:5px;
	font-size:8pt;
	}
table {
	border-collapse:collapse;
	}
table tr {
	background-color:#eee;
	}

table td, table th{
		border:1px solid #fff;}
.column1 {
	width:480px
	}
.column2{
	width:100px;
	margin-left:60px;
	}
table#demotable2 {
	width:100px;
}
th {
	background-color:#333;
	color:#fff;
	font-size:0.85em
	}
a {
	color:#0079c1;
	text-decoration:none;
	}	
a:hover {
	text-decoration:underline;
	}
.filtering {
	background-color:light-gray
	}
#jqtf_filters {
	list-style:none;	
	}
#jqtf_filters li {
	display:inline-block; 
	position:relative; 
	float:left;
	margin-bottom:20px
	}
#quickfind {
	width:480px;
	border:1px solid #ccc;
	}
.clear {
	clear:both
	}
hr {
	margin-top:20px;
	border:1px dotted #eee;
	width:640px;
	}
#cleanfilters {
	margin-left:20px;
	}
	
</style>
</head>
<body>  
<div class="wrapper">
	<div class="header">
		<div class="picnet_logo">
		</div>  
		<div class="instructions">
		<h2>PicNet Table Filter: Demo</h2>
		<p>
		Filter through the cells by typing in the input fields at the top of the columns. You can also filter using a dropdown list, checkboxes and a search bar. 
		<br/>For more information visit the
		<a href="http://www.picnet.com.au/picnet_table_filter.html" target="_blank" title="Opens in a new window">Plugin Page</a> or <a href="http://www.picnet.com.au/contact_us.html" target="_blank" title="Opens in a new window">contact us</a>.
		</p>
		</div>
	</div>
	<div class="content">
		<h3>Additional Filters for Table 1</h3>
		Only Show Yes: <input type="checkbox" id="onlyyes"/>        	
		Only Show No: <input type="checkbox" id="onlyno"/>
		<br/>    	<br/>    
		Quick Find: <input type="text" id="quickfind"/>

		<a id="cleanfilters" href="#">Clear Filters</a>
		<div class="clear"></div>
		<br/>
		<div class="column1">	
			<h3>Table 1</h3>
			<table id='demotable1'>
				<thead>
					<tr><th>Text Column 1</th><th>Number Column</th><th>Yes/No Column</th><th filter-type='ddl'>List Column</th><th filter='false'>No Filter</th><th>Date Column</th><th filter='false'>Empty</th></tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
		
		<div class="column2">	
			<h3>Table 2 <span id='rowcount'></span></h3>
			<table id='demotable2'>
				<thead>
					<tr><th>Text Column 2</th></tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>	
		<div class="clear"></div>
		<hr/>
		<p>This plugin was developed by <a href='mailto:guido.tapia@picnet.com.au'>Guido Tapia</a> - <a href='http://www.picnet.com.au/software_development.html'>Software Development</a> manager at <a href='http://www.picnet.com.au'>PicNet</a>.</p>
	</div>
</div>
	</body>
</html>